<template>
	<!-- HTML -->
	<view class="flex">
		<view class="height50">
			
		</view>
		<audio :src='recorder.localUrl' v-if='recorder' name='本地录音' controls="true"></audio>
	<!-- 	<view @click='handlerOnCahnger'>
			{{!status?'开始录音':'结束并且保存录音'}}
		</view> -->
		<mumu-recorder ref='recorder' @success='handlerSuccess' @error='handlerError'></mumu-recorder>
		
		<view class="footer">
			<all-speech @startRecord="start" @endRecord="end" @cancelRecord="cancel"></all-speech>
		</view>
	</view>
</template>
 
<script>
	// js
	// import MumuRecorder from '@/uni_modules/mumu-recorder/components/mumu-recorder/mumu-recorder.vue'
	export default {
		components: {
			// MumuRecorder
		},
		data() {
			return {
				status: false,
				recorder: null
			}
		},
		onLoad() {

		},
		methods: {
			start() {
				// 开始录音
				if (this.status) {
					this.$refs.recorder.stop()
				} else {
					this.$refs.recorder.start()
				}
				this.status = !this.status
				
			},
			end(event) {
				if (this.status) {
					this.$refs.recorder.stop()
				} else {
					this.$refs.recorder.start()
				}
				this.status = !this.status
				// 结束录音并处理得到的录音文件
				// event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
			},
			cancel() {
				// 用户取消录音
			},


			handlerSave() {
				let tag = document.createElement('a')
				tag.href = this.recorder.localUrl
				tag.download = '录音'
				tag.click()
			},
			handlerOnCahnger() {
				
			},
			handlerSuccess(res) {
				console.log(res)
				this.recorder = res


				if (this.recorder.localUrl) {
					uni.uploadFile({
						url: this.$api.upload,
						filePath: this.recorder.localUrl,
						name: 'file',

						header: null,
						success: uploadRes => {
							console.log('uploadRes-------------',
								uploadRes, 'this.formData', this
								.formData,
								'this.uploadServerUrl', this
								.uploadServerUrl);
							/* 阿里云上传 */


							/* 七牛云上传 */
							uploadRes = JSON.parse(uploadRes.data);

							if (uploadRes.code != 0) {
								// console.log('进入失败uploadRes', uploadRes);
								uni.showToast({
									title: '上传失败 : ' +
										uploadRes.data,
									icon: 'none'
								});
								this.error(index);
							} else {

								this.$sun.toast('语音上传成功' + uploadRes.data.url, 'none')

								uni.setStorageSync('speech', uploadRes.data.url);

								setTimeout(() => {
									this.$sun.navBack()
								}, 500)


							}

						},
						fail: e => {
							uni.showToast({
								title: '上传录音失败',
								icon: 'none'
							});
							this.error('上传录音失败');
						}
					});
				}





			},
			handlerError(code) {
				switch (code) {
					case '101':
						uni.showModal({
							content: '当前浏览器版本较低，请更换浏览器使用，推荐在微信中打开。'
						})
						break;
					case '201':
						uni.showModal({
							content: '麦克风权限被拒绝，请刷新页面后授权麦克风权限。'
						})
						break
					default:
						uni.showModal({
							content: '未知错误，请刷新页面重试'
						})
						break
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {}
	.footer {
		position: fixed;
		bottom: 15vh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>